<template>
  <!-- 任务管理 -->
  <div class="box-shadow">
    <!-- 搜索 -->
    <div class="search-area">
      <div class="form">
        <el-form
          :model="listQuery"
          ref="listQuery"
          size="small"
          :inline="true"
          label-width="115px"
        >
          <el-form-item
            label-width="160px"
            :label="$t('任务模板名称') + ':'"
            prop="name"
          >
            <el-input
              v-model="listQuery.name"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item :label="$t('巡检类型') + ':'" prop="viewType">
            <el-select
              v-model="listQuery.viewType"
              :placeholder="$t('请选择')"
              clearable
              size="medium"
            >
              <el-option
                v-for="dict in dict.type.viewType"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('结束动作') + ':'" prop="overType">
            <el-select
              clearable
              size="medium"
              v-model="listQuery.overType"
              :placeholder="$t('请选择')"
            >
              <el-option
                v-for="dict in dict.type.overType"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('巡检维度') + ':'" prop="dimension">
            <el-select
              v-model="listQuery.dimension"
              :placeholder="$t('请选择')"
              clearable
              size="medium"
            >
              <el-option
                v-for="dict in dict.type.dimension"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="优先级:">
            <el-checkbox-group v-model="listQuery.priorityList">
              <el-checkbox label="1">1级</el-checkbox>
              <el-checkbox label="2">2级</el-checkbox>
              <el-checkbox label="3">3级</el-checkbox>
              <el-checkbox label="4">4级</el-checkbox>
              <el-checkbox label="5">5级</el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
        </el-form>
      </div>
      <div class="search-area-btn btns">
        <div
          @click="serachBtn"
          class="serch-btn cursor-pointer"
          v-hasPermi="['task:template:search']"
        >
          {{ $t("搜索") }}
        </div>
        <div
          @click="resetFormBtn()"
          class="reset-btn cursor-pointer"
          v-hasPermi="['task:template:reset']"
        >
          {{ $t("重置") }}
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <div class="self">
        <div class="search-area-btn btns">
          <div
            @click="addTemplateBtn"
            class="serch-btn cursor-pointer table-top"
            v-hasPermi="['task:template:add']"
          >
            {{ $t("新增模板") }}
          </div>
          <div
            @click="handleDelete('more', '')"
            class="btn-red cursor-pointer table-top"
            v-hasPermi="['task:template:batchremove']"
          >
            {{ $t("批量删除") }}
          </div>
        </div>
        <el-table
          ref="tableRef"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%; margin-top: 16px"
          @selection-change="selectionChange"
        >
          <el-table-column align="center" type="selection"> </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="id"
            :label="$t('模板ID')"
          >
          </el-table-column>
          <el-table-column
            width="300"
            show-overflow-tooltip
            align="center"
            prop="name"
            :label="$t('任务模板名称')"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="priority"
            :label="$t('任务优先级')"
          >
          </el-table-column>
          <el-table-column
            prop="viewType"
            :label="$t('巡检类型')"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.viewType"
                :value="scope.row.viewType"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="overType"
            :label="$t('结束动作')"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.overType"
                :value="scope.row.overType"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="dimension"
            :label="$t('巡检维度')"
            show-overflow-tooltip
            align="center"
          >
            <template slot-scope="scope">
              <dict-tag
                :options="dict.type.dimension"
                :value="scope.row.dimension"
              />
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            prop="mapName"
            :label="$t('所属地图')"
            show-overflow-tooltip
            align="center"
            width="300"
          >
          </el-table-column> -->
          <el-table-column align="center" :label="$t('操作')" width="280">
            <template slot-scope="scope">
              <div class="table-btns">
                <div
                  style="width: 70px"
                  class="serch-btn cursor-pointer"
                  @click="rowTaskClick(scope.row, 'immediate')"
                  v-hasPermi="['task:template:immediate']"
                >
                  {{ $t("立即执行") }}
                </div>
                <div
                  class="serch-btn cursor-pointer"
                  style="width: 70px"
                  @click="rowTaskClick(scope.row, 'regular')"
                  v-hasPermi="['task:template:regular']"
                >
                  {{ $t("定期执行") }}
                </div>
                <div
                  @click="rowTaskClick(scope.row, 'cycle')"
                  class="serch-btn cursor-pointer"
                  style="width: 70px"
                  v-hasPermi="['task:template:cycle']"
                >
                  {{ $t("周期执行") }}
                </div>
                <el-popover placement="bottom" trigger="hover">
                  <div class="popover-content">
                    <div
                      @click="editTemplate(scope.row)"
                      class="btn-green cursor-pointer"
                      style="width: 40px; height: 30px; line-height: 30px"
                      v-hasPermi="['task:template:edit']"
                    >
                      {{ $t("编辑") }}
                    </div>
                    <div
                      @click="handleDelete('less', scope.row)"
                      class="btn-red cursor-pointer"
                      style="
                        width: 40px;
                        height: 30px;
                        line-height: 30px;
                        margin-left: 10px;
                      "
                      v-hasPermi="['task:template:remove']"
                    >
                      {{ $t("删除") }}
                    </div>
                  </div>
                  <div slot="reference" style="color: #fff">
                    <img
                      style="display: inline-block; width: 20px; height: 20px"
                      src="../../../assets/images/task/more.png"
                      alt=""
                    />
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagenation">
        <pagination
          :total="total"
          :page.sync="listQuerySubmit.pageNum"
          :limit.sync="listQuerySubmit.pageSize"
          @pagination="getTableList"
        >
        </pagination>
      </div>
    </div>
    <!-- 抽屉盒子 -->
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
      size="35%"
    >
      <el-form
        :model="drawerForm"
        ref="drawerRef"
        :rules="formRules"
        :inline="true"
        label-width="151px"
      >
        <el-form-item :label="$t('任务名称') + '：'" prop="name">
          <el-input v-model="drawerForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="$t('当前模板')" required>
          <el-input
            v-model="drawerForm.templateName"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('启动时间')"
          prop="regularStartTime"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? formRules.startTime
              : []
          "
        >
          <el-date-picker
            v-model="drawerForm.regularStartTime"
            :picker-options="timePickerOption"
            type="datetime"
            :placeholder="$t('选择开始时间')"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 200px"
            @change="handleRegularStartTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          prop="overTimeLength"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :label="$t('超时时长')"
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? formRules.overTimeLength
              : []
          "
        >
          <el-input
            v-model="drawerForm.overTimeLength"
            autocomplete="off"
            style="width: 200px"
            :disabled="
              drawerBooArr.find((item) => {
                return item.type == 'immediate';
              }).bool
                ? true
                : false
            "
          ></el-input>
          <span style="color: #fff">{{ $t("分钟") }}</span>
        </el-form-item>
        <el-row
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
        >
          <el-col>
            <el-form-item
              prop="overTimeActionType"
              :label="$t('超时动作')"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'regular';
                }).bool
                  ? formRules.overTimeActionType
                  : []
              "
            >
              <el-select
                v-model="drawerForm.overTimeActionType"
                :placeholder="$t('请选择')"
                :disabled="
                  drawerBooArr.find((item) => {
                    return item.type == 'immediate';
                  }).bool
                    ? true
                    : false
                "
              >
                <el-option
                  v-for="item in drawActionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="drawerForm.overTimeActionType == '4'">
            <el-form-item
              prop="stopPoint"
              :rules="
                drawerForm.overTimeActionType == '4' ? formRules.stopPoint : []
              "
            >
              <el-input
                v-model="drawerForm.stopPoint"
                autocomplete="off"
                :placeholder="$t('请输入停靠点位置')"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
          :label="$t('超期上限') + '：'"
          prop="agingTime"
          :rules="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
              ? formRules.agingTime
              : []
          "
        >
          <el-input-number
            v-model="drawerForm.agingTime"
            controls-position="right"
            :step="0.5"
            :min="0"
            :max="7"
          ></el-input-number>
          <span style="color: #fff">{{ $t("天") }}</span>
        </el-form-item>
        <div
          class="draw-content-explain"
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'immediate';
            }).bool ||
            drawerBooArr.find((item) => {
              return item.type == 'regular';
            }).bool
          "
        >
          <div>
            {{
              $t(
                "超时时长从真实执行开始计时超出后将强制终止正在执行的任务不包含暂停时长"
              )
            }}
          </div>
          <div>
            {{ $t("超期上限从计划执行开始计时超出后将不再执行等待执行的任务") }}
          </div>
        </div>
        <div
          v-if="
            drawerBooArr.find((item) => {
              return item.type == 'cycle';
            }).bool
          "
        >
          <el-form-item
            v-if="false"
            :label="$t('周期类型')"
            prop="cycleType"
            :rules="
              drawerBooArr.find((item) => {
                return item.type == 'cycle';
              }).bool
                ? formRules.cycleType
                : []
            "
          >
            <el-radio-group v-model="drawerForm.cycleType">
              <el-radio label="1">{{ $t("定周期") }}</el-radio>
              <el-radio disabled label="2">{{ $t("不定周期") }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 常规 周期 -->
          <template>
            <!-- 标题 -->
            <div class="cycle-config">
              <div>{{ $t("配置") }}</div>
              <div class="chang-btn">
                <div>{{ $t("常规") }}</div>
                <div>{{ $t("高级") }}</div>
              </div>
            </div>
            <div class="model">
              <div class="model-title">
                <div>{{ $t("生效时段") }}</div>
              </div>
              <div class="take-effect-time">
                <el-form-item
                  :label="$t('开始日期')"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                      ? formRules.startTime
                      : []
                  "
                  prop="startTime"
                >
                  <el-date-picker
                    v-model="drawerForm.startTime"
                    type="date"
                    :placeholder="$t('选择日期')"
                    :picker-options="pickerOptionsStart"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item
                  :label="$t('结束日期')"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                      ? formRules.endTime
                      : []
                  "
                  prop="endTime"
                >
                  <el-date-picker
                    v-model="drawerForm.endTime"
                    type="date"
                    :placeholder="$t('选择日期')"
                    :picker-options="pickerOptionsEnd"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="model-title" style="padding-top: 20px">
                <div>{{ $t("执行配置") }}</div>
                <div class="take-effect-time" style="border-bottom: 0">
                  <!-- 启动时间 -->
                  <el-form-item :label="$t('启动时间')" required>
                    <el-row>
                      <el-col :span="10">
                        <el-input-number
                          v-model="drawerForm.executeTimePre"
                          controls-position="right"
                          :min="0"
                          :max="23"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="3">{{ $t("小时") }}</el-col>
                      <el-col :span="10">
                        <el-input-number
                          v-model="drawerForm.executeTimeNext"
                          controls-position="right"
                          :min="0"
                          :max="59"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="1">{{ $t("分") }}</el-col>
                    </el-row>
                  </el-form-item>
                  <!-- 重复频率 -->
                  <el-form-item
                    :label="$t('重复频率') + '：'"
                    required
                    label-width="163px"
                  >
                    <el-row>
                      <el-col :span="3">{{ $t("每") }}</el-col>
                      <el-col :span="8">
                        <el-input-number
                          v-model="drawerForm.repeatRate"
                          controls-position="right"
                          :min="0.5"
                          :step="0.5"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <el-col :span="10">
                        <el-select
                          v-model="drawerForm.repeatRateUnit"
                          :placeholder="$t('请选择')"
                        >
                          <el-option :label="$t('小时')" value="2"></el-option>
                          <el-option :label="$t('天')" value="3"></el-option>
                        </el-select>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <!-- 超时时长 -->
                  <el-form-item
                    :label="$t('超时时长')"
                    required
                    label-width="153px"
                  >
                    <el-row style="display: flex">
                      <el-col :span="18" :xs="24">
                        <el-input-number
                          v-model="drawerForm.overTimeLength"
                          controls-position="right"
                          :min="1"
                          style="width: 100px"
                        ></el-input-number>
                      </el-col>
                      <label>{{ $t("分钟") }}</label>
                    </el-row>
                  </el-form-item>
                  <!-- 超时动作 -->
                  <el-form-item
                    :label="$t('超时动作')"
                    required
                    label-width="136px"
                  >
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <el-select
                          v-model="drawerForm.overTimeActionType"
                          :placeholder="$t('请选择')"
                          style="width: 208px"
                        >
                          <el-option
                            :label="$t('原地待命')"
                            value="1"
                          ></el-option>
                          <el-option
                            :label="$t('回充电桩')"
                            value="2"
                          ></el-option>
                          <!-- <el-option label="回到起点" value="3"></el-option> -->
                          <el-option
                            :label="$t('前往停靠点')"
                            value="4"
                          ></el-option>
                        </el-select>
                      </el-col>
                      <el-col
                        :span="12"
                        v-if="drawerForm.overTimeActionType == '4'"
                      >
                        <el-form-item
                          prop="stopPoint"
                          :rules="
                            drawerForm.overTimeActionType == '4'
                              ? formRules.stopPoint
                              : []
                          "
                        >
                          <el-input
                            v-model="drawerForm.stopPoint"
                            autocomplete="off"
                            :placeholder="$t('请输入停靠点位置')"
                            clearable
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-form-item
                    :label="$t('超期上限')"
                    required
                    label-width="131px"
                  >
                    <el-col :span="22">
                      <el-input-number
                        v-model="drawerForm.agingTime"
                        controls-position="right"
                        :min="0"
                        :max="7"
                        :step="0.5"
                        style="width: 100px"
                      ></el-input-number>
                    </el-col>
                    <el-col :span="2">{{ $t("天") }}</el-col>
                  </el-form-item>
                </div>
                <div
                  class="draw-content-explain"
                  v-if="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                  "
                >
                  <div>
                    {{
                      $t(
                        "超时时长从真实执行开始计时超出后将强制终止正在执行的任务不包含暂停时长"
                      )
                    }}
                  </div>
                  <div>
                    {{
                      $t(
                        "超期上限从计划执行开始计时超出后将不再执行等待执行的任务"
                      )
                    }}
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 高级 周期 -->
          <template v-if="false">
            <!-- 生效时段 -->
            <div class="model">
              <div class="model-title">
                <div>{{ $t("生效时段") }}</div>
              </div>
              <el-form-item
                :label="$t('生效时长')"
                prop="validType"
                :rules="
                  drawerBooArr.find((item) => {
                    return item.type == 'cycle';
                  }).bool
                    ? formRules.validType
                    : []
                "
              >
                <el-radio-group v-model="drawerForm.validType">
                  <el-radio label="1">{{ $t("永久生效") }}</el-radio>
                  <el-radio label="2">{{ $t("指定时段") }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 快速设置 -->
              <div v-if="drawerForm.validType == '2'">
                <div class="hurry-setting">
                  <div class="title" style="padding-left: 20px">
                    {{ $t("快速设置") }}
                  </div>
                  <div
                    v-for="(item, index) in hurrySetting"
                    :key="index"
                    :class="[
                      'contents',
                      index == currentSetting ? 'current' : '',
                    ]"
                    @click="chooseQuickSetting(index)"
                  >
                    <div class="cursor-pointer">{{ item.label }}</div>
                  </div>
                </div>
                <!-- 快速设置 开始时间 -->
                <el-form-item
                  prop="quickStartDate"
                  :label="$t('开始时间') + ':'"
                  style="display: flex"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool && drawerForm.validType == '2'
                      ? formRules.quickStartDate
                      : []
                  "
                >
                  <el-date-picker
                    v-model="drawerForm.quickStartDate"
                    type="datetime"
                    :placeholder="$t('选择开始时间')"
                  >
                  </el-date-picker>
                </el-form-item>
                <!-- 快速设置  结束时间-->
                <el-form-item
                  prop="quickEndDate"
                  label="结束时间："
                  style="display: flex"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool && drawerForm.validType == '2'
                      ? formRules.quickEndDate
                      : []
                  "
                >
                  <el-date-picker
                    v-model="drawerForm.quickEndDate"
                    type="datetime"
                    :placeholder="$t('选择结束时间')"
                  >
                  </el-date-picker>
                </el-form-item>
              </div>
            </div>
            <!-- 执行配置 -->
            <div class="config">
              <div class="model-title">{{ $t("执行配置") }}</div>
              <el-row>
                <!-- 重复频率 -->
                <el-form-item
                  :label="$t('重复频率')"
                  prop="repeatRate"
                  :rules="
                    drawerBooArr.find((item) => {
                      return item.type == 'cycle';
                    }).bool
                      ? formRules.repeatRate
                      : []
                  "
                >
                  <el-col :span="10">
                    <label>{{ $t("每") }}&nbsp;&nbsp;</label>
                    <el-input-number
                      v-model="drawerForm.repeatRate"
                      controls-position="right"
                      :min="0.5"
                      :step="0.5"
                      style="width: 100px"
                    ></el-input-number>
                  </el-col>
                  <el-col :span="14">
                    <el-select
                      v-model="drawerForm.repeatRateUnit"
                      :placeholder="$t('请选择')"
                      @change="repeatRateUnitChange"
                    >
                      <el-option
                        v-for="dict in dict.type.repeatRateUnit"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      >
                      </el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
              <el-row>
                <!-- 执行时间 -->
                <el-form-item :label="$t('执行时间') + ':'" required>
                  <!-- 月 -->
                  <el-row
                    class="month-time"
                    v-if="drawerForm.repeatRateUnit == '6'"
                  >
                    <label>{{ $t("月") }}</label>
                    <div
                      v-for="(item, index) in monthsData"
                      :key="index"
                      :class="['months', item.isSelected ? 'Active' : '']"
                      @click="monthClick(index, item)"
                    >
                      <div>{{ item.label }}</div>
                    </div>
                  </el-row>
                  <!-- 周 -->
                  <el-row
                    v-if="
                      drawerForm.repeatRateUnit == '4' ||
                      drawerForm.repeatRateUnit == '5' ||
                      drawerForm.repeatRateUnit == '6'
                    "
                    class="month-time"
                    style="margin: 15px 0"
                  >
                    <label>{{ $t("周") }}</label>
                    <div
                      v-for="(item, index) in weekData"
                      :key="index"
                      :class="['months', item.isSelected ? 'Active' : '']"
                      @click="weekClick(index, item)"
                    >
                      <div>{{ item.label }}</div>
                    </div>
                  </el-row>
                  <el-row class="month-time">
                    <label>{{ $t("秒") }}</label>
                    <div class="execute-time">
                      <el-form-item
                        prop="h"
                        v-if="
                          drawerForm.repeatRateUnit !== '1' &&
                          drawerForm.repeatRateUnit !== '2'
                        "
                        :rules="
                          drawerBooArr.find((item) => {
                            return item.type == 'cycle';
                          }).bool &&
                          drawerForm.repeatRateUnit !== '1' &&
                          drawerForm.repeatRateUnit !== '2'
                            ? formRules.h
                            : []
                        "
                      >
                        <el-input-number
                          v-model="drawerForm.h"
                          controls-position="right"
                          :min="1"
                          :max="12"
                          style="width: 80px"
                        ></el-input-number>
                        <span>{{ $t("小时") }}</span>
                      </el-form-item>
                      <el-form-item
                        prop="m"
                        v-if="drawerForm.repeatRateUnit !== '1'"
                        :rules="
                          drawerBooArr.find((item) => {
                            return item.type == 'cycle';
                          }).bool && drawerForm.repeatRateUnit !== '1'
                            ? formRules.m
                            : []
                        "
                      >
                        <el-input-number
                          v-model="drawerForm.m"
                          controls-position="right"
                          :min="1"
                          :max="60"
                          style="width: 80px"
                        ></el-input-number>
                        <span>{{ $t("分") }}</span>
                      </el-form-item>
                      <el-form-item
                        prop="s"
                        :rules="
                          drawerBooArr.find((item) => {
                            return item.type == 'cycle';
                          }).bool
                            ? formRules.s
                            : []
                        "
                      >
                        <el-input-number
                          v-model="drawerForm.s"
                          controls-position="right"
                          :min="1"
                          :max="60"
                          style="width: 80px"
                        ></el-input-number>
                        <span>{{ $t("秒") }}</span>
                      </el-form-item>
                    </div>
                  </el-row>
                </el-form-item>
                <!-- 超期上限 -->
                <el-form-item :label="$t('超期上限')" prop="agingTime">
                  <el-input-number
                    v-model="drawerForm.agingTime"
                    controls-position="right"
                    :step="0.5"
                    :min="0"
                    :max="7"
                  ></el-input-number>
                  <span>{{ $t("天") }}</span>
                </el-form-item>
              </el-row>
            </div>
          </template>
          <!-- 算法样本 -->
          <div class="algorith">
            <div class="model-title">{{ $t("算法训练样本") }}</div>
            <el-form-item
              :label="$t('是否采集训练样本')"
              label-width="273px"
              prop="trainingSampleGather"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'cycle';
                }).bool
                  ? formRules.trainingSampleGather
                  : []
              "
            >
              <el-radio-group v-model="drawerForm.trainingSampleGather">
                <el-radio label="1">{{ $t("不采集") }}</el-radio>
                <el-radio label="2">{{ $t("采集") }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              v-if="drawerForm.trainingSampleGather == '2'"
              :label="$t('云台单向转动次数')"
              label-width="240px"
              prop="trainingSampleCount"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'cycle';
                }).bool && drawerForm.trainingSampleGather == '2'
                  ? formRules.trainingSampleCount
                  : []
              "
            >
              <el-select
                v-model="drawerForm.trainingSampleCount"
                :placeholder="$t('请选择')"
                style="width: 136px"
              >
                <el-option
                  v-for="item in trainingSampleCountList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <label>{{ $t("次") }}</label>
            </el-form-item>
            <el-form-item
              v-if="drawerForm.trainingSampleGather == '2'"
              :label="$t('云台转动角度间隔')"
              label-width="240px"
              prop="trainingSampleAngle"
              :rules="
                drawerBooArr.find((item) => {
                  return item.type == 'cycle';
                }).bool && drawerForm.trainingSampleGather == '2'
                  ? formRules.trainingSampleAngle
                  : []
              "
            >
              <el-select
                v-model="drawerForm.trainingSampleAngle"
                :placeholder="$t('请选择')"
                style="width: 136px"
              >
                <el-option
                  v-for="item in trainingSampleAngleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <label>°</label>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="demo-drawer__footer drawer-footer">
        <div @click="submitBtn" class="serch-btn">{{ $t("保存") }}</div>
        <div @click="drawerCancle" class="reset-btn">{{ $t("取消") }}</div>
      </div>
    </el-drawer>
    <!-- 立即执行弹框 -->
    <TaskDialog
      :taskDialog="taskVisible"
      :taskName="taskName"
      @taskDialogConfirm="dialogConfirm"
      @taskDialogCancle="taskDialogCancle"
    ></TaskDialog>
  </div>
</template>
<script>
import {
  API_taskControl, //任务控制
} from "@/api/robot/monitor";
import {
  API_TemplateList,
  API_delTemplate,
  API_immediate,
  API_regular,
  API_periodic,
} from "@/api/task/template";
import moment from "moment";
import { mapGetters } from "vuex";
import TaskDialog from "@/components/TaskDialog";
import cloudMotorVue from "../../log/diagnostic/cloudMotor.vue";
export default {
  dicts: ["viewType", "overType", "dimension", "repeatRateUnit"],
  components: {
    TaskDialog,
  },
  data() {
    var stopPoint = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t("请输入正确格式数据")));
      } else {
        //轨道
        if (this.globalRobotInfo.moveMotor == "1") {
          var pattern = /^\d+.?\d{0,2}$/;
          if (!pattern.test(value)) {
            callback(new Error(this.$t("小数点后最多只能输入两位")));
          } else {
            callback();
          }
        } else {
          // 轮式
          let oribrule = /^\d+$/;
          // 截取前两个并判断
          let start = value.slice(0, 2);
          let num = value.slice(2);
          if (start != "LM") {
            callback(new Error(this.$t("轮式地图停靠位置请以LM开头")));
          } else if (!oribrule.test(num)) {
            callback(new Error(this.$t("请输入正确的格式")));
          } else {
            callback();
          }
        }
      }
    };
    return {
      //定期执行限制
      timePickerOption: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
        // disabledDate(time) {
        //   const dateTime = new Date();
        //   const startDateTime = dateTime.setDate(dateTime.getDate() - 1);
        //   return time.getTime() < new Date(startDateTime).getTime();
        // },
        // selectableRange:
        //   parseTime(
        //     new Date(moment().format("YYYY-MM-DD HH:mm:ss")),
        //     "{hh}:{ii}:{ss}"
        //   ) + "- 23:59:00",
      },
      pickerOptionsStart: {
        disabledDate: (time) => {
          let endDateVal = this.drawerForm.endTime;
          if (endDateVal) {
            return (
              time.getTime() >=
                new Date(endDateVal).getTime() + 1 * 24 * 60 * 60 * 1000 ||
              time.getTime() < Date.now() - 8.64e7
            );
          } else {
            return time.getTime() < Date.now() - 8.64e7; //禁用以前的日期，今天不禁用
          }
        },
      },
      pickerOptionsEnd: {
        disabledDate: (time) => {
          let beginDateVal = this.drawerForm.startTime;
          let secondNum =
            new Date(beginDateVal).getTime() + 1000 * 60 * 60 * 24 * 90;
          if (beginDateVal) {
            return (
              time.getTime() > secondNum ||
              time.getTime() < new Date(beginDateVal).getTime()
            );
          } else {
            return (
              time.getTime() > Date.now() - 8.64e7 + 1000 * 60 * 60 * 24 * 90 ||
              time.getTime() < Date.now() - 8.64e7
            ); //禁用以前的日期，今天不禁用
          }
        },
      },
      drawerVisible: false,
      taskVisible: false, //任务dialog
      rowId: "",
      taskId: "", //全局当前任务id
      taskProcess: "", //当前任务状态
      execId: "", //全局当前任务执行id
      taskName: "", //全局当前任务名称
      drawerTitle: "", //抽屉盒字标题
      currentSetting: "",
      monthActive: "", //多选的月份
      weekActive: "", //多选的周
      currentTaskTimer: null, //当前任务定时器
      listQuery: {
        name: null,
        viewType: "",
        overType: "",
        dimension: "",
        priorityList: [],
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      listQuerySubmit: {},
      tableData: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      //弹出层表单
      drawerForm: {
        name: "",
        templateName: "",
        stopPoint: "", //停靠点
        agingTime: "0", //超期上限
        regularStartTime: "", //定期执行启动时间
        cycleType: "1",
        validType: "2", //生效时长
        hurrySetting: "", //快速设置
        quickStartDate: "", //快速设置-开始日期
        quickEndDate: "", //快速设置-结束日期
        // 执行配置
        repeatRate: "3", //重复频率
        repeatRateUnit: "2", //重复频率单位
        //执行时间
        month: "", //循环monthsData获取isSelet为true
        week: "", //同上
        seconds: "",
        h: "",
        m: "",
        s: "",
        trainingSampleGather: "1", //是否采集训练样本
        trainingSampleCount: "", //云台转动次数
        trainingSampleAngle: "", //云台转动间隔
        //常规  生效时段
        startTime: "", //开始日期
        endTime: "", //结束日期
        overTimeLength: "", //超时时长
        overTimeActionType: "", //超时动作
        executeTimePre: 8, //启动时间 前
        executeTimeNext: 0, //启动时间 后
      },
      //弹框内部数据
      drawerBooArr: [
        {
          bool: false,
          type: "immediate",
          title: this.$t("立即执行"),
        },
        {
          bool: false,
          type: "regular",
          title: this.$t("定期执行"),
        },
        {
          bool: false,
          type: "cycle",
          title: this.$t("周期执行"),
        },
      ],
      //超时动作数组
      drawActionOptions: [],
      //快速设置数组
      hurrySetting: [
        {
          value: "1",
          label: this.$t("本月"),
        },
        {
          value: "2",
          label: this.$t("本季度"),
        },
        {
          value: "3",
          label: this.$t("本年"),
        },
        {
          value: "4",
          label: this.$t("未来30天"),
        },
        {
          value: "5",
          label: this.$t("未来90天"),
        },
        {
          value: "6",
          label: this.$t("未来365天"),
        },
      ],
      //执行配置--月
      monthsData: [
        {
          label: "1",
          isSelected: false,
        },
        {
          label: "2",
          isSelected: false,
        },
        {
          label: "3",
          isSelected: false,
        },
        {
          label: "4",
          isSelected: false,
        },
        {
          label: "5",
          isSelected: false,
        },
        {
          label: "6",
          isSelected: false,
        },
        {
          label: "7",
          isSelected: false,
        },
        {
          label: "8",
          isSelected: false,
        },
        {
          label: "9",
          isSelected: false,
        },
        {
          label: "10",
          isSelected: false,
        },
        {
          label: "11",
          isSelected: false,
        },
        {
          label: "12",
          isSelected: false,
        },
      ],
      //执行配置--周
      weekData: [
        {
          label: this.$t("一"),
          isSelected: false,
        },
        {
          label: this.$t("二"),
          isSelected: false,
        },
        {
          label: this.$t("三"),
          isSelected: false,
        },
        {
          label: this.$t("四"),
          isSelected: false,
        },
        {
          label: this.$t("五"),
          isSelected: false,
        },
        {
          label: this.$t("六"),
          isSelected: false,
        },
        {
          label: this.$t("七"),
          isSelected: false,
        },
      ],
      // 云台转动次数
      trainingSampleCountList: [
        {
          label: "1",
          value: "1",
        },
        {
          label: "2",
          value: "2",
        },
        {
          label: "3",
          value: "3",
        },
        {
          label: "4",
          value: "4",
        },
        {
          label: "5",
          value: "5",
        },
      ],
      // 转动角度间隔
      trainingSampleAngleList: [
        {
          label: "0.1",
          value: "0.1",
        },
        {
          label: "0.2",
          value: "0.2",
        },
        {
          label: "0.3",
          value: "0.3",
        },
        {
          label: "0.4",
          value: "0.4",
        },
        {
          label: "0.5",
          value: "0.5",
        },
      ],
      formRules: {
        name: [
          {
            required: true,
            message: this.$t("任务名称不能为空"),
            trigger: "blur",
          },
        ],
        templateName: [
          { required: true, message: this.$t("模板不能为空"), trigger: "blur" },
        ],
        overTimeLength: [
          {
            required: true,
            message: this.$t("超时时长不能为空"),
            trigger: "change",
          },
        ],
        overTimeActionType: [
          {
            required: true,
            message: this.$t("超时动作不能为空"),
            trigger: "change",
          },
        ],
        stopPoint: [{ required: true, validator: stopPoint, trigger: "blur" }],
        agingTime: [
          {
            required: true,
            message: this.$t("超时上限不能为空"),
            trigger: "blur",
          },
        ],
        regularStartTime: [
          {
            required: true,
            message: this.$t("开始时间不能为空"),
            trigger: "blur",
          },
        ],
        cycleType: [
          { required: true, message: this.$t("周期类型"), trigger: "blur" },
        ],
        validType: [
          {
            required: true,
            message: this.$t("请选择生效时长"),
            trigger: "change",
          },
        ],
        quickStartDate: [
          {
            required: true,
            message: this.$t("开始时间不能为空"),
            trigger: "change",
          },
        ],
        quickEndDate: [
          {
            required: true,
            message: this.$t("结束时间不能为空"),
            trigger: "change",
          },
        ],
        // 重复频率
        repeatRate: [
          {
            required: true,
            message: this.$t("重复频率不能为空"),
            trigger: "blur",
          },
        ],
        s: [
          { required: true, message: this.$t("秒数不能为空"), trigger: "blur" },
        ],
        m: [
          { required: true, message: this.$t("分钟不能为空"), trigger: "blur" },
        ],
        h: [
          { required: true, message: this.$t("小时不能为空"), trigger: "blur" },
        ],
        trainingSampleGather: [
          {
            required: true,
            message: this.$t("训练样本不能为空"),
            trigger: "blur",
          },
        ],
        trainingSampleCount: [
          {
            required: true,
            message: this.$t("云台单向转动次数不能为空"),
            trigger: "change",
          },
        ],
        trainingSampleAngle: [
          {
            required: true,
            message: this.$t("云台单向转动次数不能为空"),
            trigger: "change",
          },
        ],
        startTime: [
          {
            required: true,
            message: this.$t("开始日期不能为空"),
            trigger: "change",
          },
        ],
        endTime: [
          {
            required: true,
            message: this.$t("结束日期不能为空"),
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["globalCurrentTaskInfo", "globalRobotInfo"]),
  },
  created() {
    this.listQuerySubmit = Object.assign({}, this.listQuery);
    this.getTableList();
  },
  mounted() {
    this.currentTaskTimer = setInterval(() => {
      this.getTaskInfo();
    }, 1000);
  },
  methods: {
    handleRegularStartTime() {
      var startAt = (new Date(this.drawerForm.regularStartTime) * 1000) / 1000;
      if (startAt < Date.now()) {
        this.$message.warning("历史时间不支持选择，已切换为当前时间！");
        this.drawerForm.regularStartTime = new Date();
      }
    },
    //获取当前任务信息
    getTaskInfo() {
      this.$store.dispatch("getGlobalTaskInfo").then((res) => {
        if (res.code == 200 && res.data) {
          this.taskId = JSON.parse(res.data).taskId; //任务ID
          this.taskProcess = JSON.parse(res.data).taskProcess;
          this.execId = JSON.parse(res.data).execId; //任务执行ID
          this.taskName = JSON.parse(res.data).taskName; //任务名称
        }
      });
    },
    /**抽屉取消 */
    drawerCancle() {
      this.drawerVisible = false;
      this.taskVisible = false;
    },
    /**搜索 */
    serachBtn() {
      this.listQuery.pageNum = 1;
      this.listQuerySubmit = Object.assign({}, this.listQuery);
      this.getTableList();
    },
    /** table多选 */
    selectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
    },
    /** 批量删除按钮操作 */
    handleDelete(type, row) {
      switch (type) {
        case "more":
          if (this.ids.length == 0) {
            this.$message.info(this.$t("请选择需要批量删除的任务模板"));
            return;
          }
          break;
        case "less":
          break;
      }
      const tempIds = row.id || this.ids;
      this.$confirm(
        this.$t("是否确认删除") + tempIds + this.$t("该数据项"),
        this.$t("提示"),
        {
          confirmButtonText: this.$t("确定"),
          cancelButtonText: this.$t("取消"),
          type: "warning",
        }
      )
        .then(function () {
          return API_delTemplate(tempIds);
        })
        .then(() => {
          this.getTableList();
          this.$modal.msgSuccess(this.$t("删除成功"));
        })
        .catch(() => {});
    },
    /**任务模板列表 */
    getTableList() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 优先级
      let priorityList = this.listQuerySubmit.priorityList;
      if (priorityList && priorityList.length > 0) {
        if (priorityList.indexOf(",") == -1) {
          priorityList = String(priorityList);
        } else {
          priorityList = priorityList.join(",");
        }
      }
      API_TemplateList({
        ...this.listQuerySubmit,
        priorityList: priorityList,
      })
        .then((res) => {
          if (res.code == 200) {
            if (res.rows.length > 0) {
              this.tableData = res.rows;
            } else {
              this.tableData = [];
            }
            this.total = Number(res.total);
            this.listQuery = Object.assign({}, this.listQuerySubmit);
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    /**新增模板 */
    addTemplateBtn() {
      this.$router.push({
        path: "/template/addTemplate",
        query: {},
      });
    },
    /**编辑模板 */
    editTemplate(row) {
      this.$router.push({
        path: "/template/editTemplate",
        query: {
          id: row.id,
        },
      });
    },
    /**立即执行、定制执行、周期执行 */
    rowTaskClick(row, type) {
      //清除校验
      setTimeout(() => {
        this.$refs.drawerRef.clearValidate();
      });
      this.rowId = "";
      this.resetDrawerForm();
      this.rowId = row.id;
      this.drawerVisible = true;
      this.drawerForm.templateName = row.name;
      switch (type) {
        //立即执行
        case "immediate":
          this.drawerForm.overTimeLength = "即时任务无时长限制";
          this.drawerForm.overTimeActionType = "0";
          this.drawActionOptions = [
            {
              value: "0",
              label: this.$t("无"),
            },
          ];
          break;
        // 周期执行
        case "regular":
          //定期执行 启动时间设置当前默认值
          this.drawerForm.regularStartTime = moment().format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawActionOptions = [
            {
              value: "1",
              label: this.$t("原地待命"),
            },
            {
              value: "2",
              label: this.$t("回充电桩"),
            },
            // {
            //   value: "3",
            //   label: "回到起点",
            // },
            {
              value: "4",
              label: this.$t("前往停靠点"),
            },
          ];
          break;
      }
      this.drawerBooArr.forEach((item) => {
        if (item.type == type) {
          item.bool = true;
          this.drawerTitle = item.title;
          this.drawerForm.name = this.drawerTitle + this.insertTempName();
        } else {
          item.bool = false;
        }
      });
    },
    /**选择快速设置 */
    chooseQuickSetting(index) {
      if (this.currentSetting != index) {
        this.currentSetting = ""; //清空数据
        this.currentSetting = index;
      }
      // 处理时间
      switch (index) {
        //本月
        case 0:
          this.drawerForm.quickStartDate = moment()
            .startOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          this.drawerForm.quickEndDate = moment()
            .endOf("month")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
        // 本季度;
        case 1:
          this.drawerForm.quickStartDate = moment(
            moment().quarter(moment().quarter()).startOf("quarter").valueOf()
          ).format("YYYY-MM-DD HH:mm:ss");
          this.drawerForm.quickEndDate = moment(
            moment().quarter(moment().quarter()).endOf("quarter").valueOf()
          ).format("YYYY-MM-DD HH:mm:ss");
          break;
        // 本年
        case 2:
          this.drawerForm.quickStartDate = moment()
            .year(moment().year())
            .startOf("year")
            .format("YYYY-MM-DD HH:mm:ss")
            .valueOf();
          this.drawerForm.quickEndDate = moment()
            .year(moment().year())
            .endOf("year")
            .format("YYYY-MM-DD HH:mm:ss")
            .valueOf();
          break;
        // 未来30天
        case 3:
          this.drawerForm.quickStartDate = moment(new Date()).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawerForm.quickEndDate = moment(new Date())
            .add(30, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
        // 未来90天
        case 4:
          this.drawerForm.quickStartDate = moment(new Date()).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawerForm.quickEndDate = moment(new Date())
            .add(90, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
        // 未来365天
        case 5:
          this.drawerForm.quickStartDate = moment(new Date()).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          this.drawerForm.quickEndDate = moment(new Date())
            .add(365, "days")
            .format("YYYY-MM-DD HH:mm:ss");
          break;
      }
    },
    /**重复频率 change */
    repeatRateUnitChange() {
      //处理月份
      this.monthsData = this.monthsData.map((item) => {
        return {
          label: item.label,
          isSelected: false,
        };
      });
      // 处理周
      this.weekData = this.weekData.map((item) => {
        return {
          label: item.label,
          isSelected: false,
        };
      });
    },
    /**选择 月 */
    monthClick(index, item) {
      this.monthActive = index;
      //然后通过这个属性判断是否选中点亮和取消
      item.isSelected = !item.isSelected;
    },
    /**选择 周 */
    weekClick(index, item) {
      this.weekActive = index;
      //然后通过这个属性判断是否选中点亮和取消
      item.isSelected = !item.isSelected;
    },
    /**抽屉盒子关闭前 */
    handleClose() {
      this.drawerVisible = false;
      this.resetDrawerForm();
    },
    /**弹框内部取消 */
    taskDialogCancle() {
      this.taskVisible = false;
    },
    /**弹框内部确认 */
    dialogConfirm(radioVal) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (radioVal == 1) {
        //暂停当前任务
        API_taskControl({
          cmd: "3X12",
          values: [this.taskId, this.execId],
        })
          .then((res) => {
            if (res.code == 200 && res.data.nerrcode == 0) {
              this.$message({
                type: "success",
                message: this.$t("任务已暂停"),
              });
              const immediateLoading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              let immediatePara = {
                id: this.rowId,
                name: this.drawerForm.name,
                agingTime: this.drawerForm.agingTime,
              };
              API_immediate(immediatePara)
                .then((res) => {
                  if (res.code == 200) {
                    this.drawerVisible = false;
                    this.getTableList();
                    this.$message.success(this.$t("立即执行操作成功"));
                  }
                })
                .finally(() => {
                  immediateLoading.close();
                });
            } else {
              this.$message.error(this.$t("暂停失败请重试"));
            }
          })
          .finally(() => {
            loading.close();
            this.taskVisible = false;
            this.drawerVisible = false;
          });
      } else if (radioVal == 2) {
        //终止当前任务
        API_taskControl({
          cmd: "3X13",
          values: [this.taskId, this.execId],
        })
          .then((res) => {
            if (res.code == 200 && res.data.nerrcode == 0) {
              this.$message({
                type: "success",
                message: this.$t("任务已终止"),
              });
              //执行当前任务
              const immediateLoading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              let params = {
                id: this.rowId,
                name: this.drawerForm.name,
                agingTime: this.drawerForm.agingTime,
              };
              API_immediate(params)
                .then((res) => {
                  if (res.code == 200) {
                    this.drawerVisible = false;
                    this.getTableList();
                    this.$message.success(this.$t("立即执行操作成功"));
                  }
                })
                .finally(() => {
                  immediateLoading.close();
                });
            } else {
              this.$message.error(this.$t("暂停失败请重试"));
            }
          })
          .finally(() => {
            loading.close();
            this.taskVisible = false;
            this.drawerVisible = false;
          });
      } else {
        //继续当前任务
      }
    },
    /**保存 btn */
    submitBtn() {
      this.$refs["drawerRef"].validate((valid) => {
        if (valid) {
          let performType = [];
          performType = this.drawerBooArr.find((item) => {
            return item.bool == true;
          }).type;
          switch (performType) {
            //立即执行
            case "immediate":
              // 判断是否有正在执行的任务
              if (this.taskId != -1 && this.taskProcess == "3") {
                //有 展示弹框
                this.taskVisible = true;
              } else {
                const immediateLoading = this.$loading({
                  lock: true,
                  text: "Loading",
                  spinner: "el-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)",
                });
                let immediatePara = {
                  id: this.rowId,
                  name: this.drawerForm.name,
                  agingTime: this.drawerForm.agingTime,
                };
                API_immediate(immediatePara)
                  .then((res) => {
                    if (res.code == 200) {
                      this.drawerVisible = false;
                      this.getTableList();
                      this.$message.success(this.$t("立即执行操作成功"));
                    }
                  })
                  .finally(() => {
                    immediateLoading.close();
                  });
              }
              break;
            //定期执行
            case "regular":
              const regularLoading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              let regularPara = {
                id: this.rowId,
                name: this.drawerForm.name,
                startTime: moment(this.drawerForm.regularStartTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ),
                agingTime: this.drawerForm.agingTime,
                overTimeLength: this.drawerForm.overTimeLength,
                overTimeActionType: this.drawerForm.overTimeActionType,
                stopPoint: this.drawerForm.stopPoint,
              };
              API_regular(regularPara)
                .then((res) => {
                  if (res.code == 200) {
                    this.drawerVisible = false;
                    this.getTableList();
                    this.$message.success(this.$t("定期执行操作成功"));
                  }
                })
                .finally(() => {
                  regularLoading.close();
                });
              break;
            //周期执行
            case "cycle":
              const cycleLoading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
              });
              //获取多选的月份
              // let months = [];
              // months = this.monthsData.filter((item) => {
              //   return item.isSelected == true;
              // });
              // months = months.map((item) => {
              //   return item.label;
              // });
              //获取多选的周
              // let weeks = [];
              // weeks = this.weekData.filter((item) => {
              //   return item.isSelected == true;
              // });
              // weeks = weeks.map((item) => {
              //   return item.label;
              // });
              // let cyclePara = {
              //   id: this.rowId,
              //   name: this.drawerForm.name,
              //   agingTime: this.drawerForm.agingTime,
              //   startTime: this.drawerForm.quickStartDate,
              //   endTime: this.drawerForm.quickEndDate,
              //   cycleType: this.drawerForm.cycleType,
              //   validType: this.drawerForm.validType,
              //   repeatRate: this.drawerForm.repeatRate,
              //   repeatRateUnit: this.drawerForm.repeatRateUnit,
              //   executeTime: JSON.stringify({
              //     months: months,
              //     weeks: weeks,
              //     h: this.drawerForm.h,
              //     m: this.drawerForm.m,
              //     s: this.drawerForm.s,
              //   }),
              //   trainingSampleGather: this.drawerForm.trainingSampleGather,
              //   trainingSampleCount: this.drawerForm.trainingSampleCount,
              //   trainingSampleAngle: this.drawerForm.trainingSampleAngle,
              // };
              let cyclePara = {
                id: this.rowId,
                name: this.drawerForm.name,
                startTime: moment(this.drawerForm.startTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ),
                endTime: moment(this.drawerForm.endTime).format(
                  "YYYY-MM-DD HH:mm:ss"
                ),
                executeTime: JSON.stringify({
                  h: this.drawerForm.executeTimePre,
                  m: this.drawerForm.executeTimeNext,
                }),
                repeatRate: this.drawerForm.repeatRate,
                repeatRateUnit: this.drawerForm.repeatRateUnit,
                overTimeLength: this.drawerForm.overTimeLength,
                overTimeActionType: this.drawerForm.overTimeActionType,
                agingTime: this.drawerForm.agingTime,
                stopPoint: this.drawerForm.stopPoint,
                trainingSampleGather: this.drawerForm.trainingSampleGather,
                trainingSampleCount: this.drawerForm.trainingSampleCount,
                trainingSampleAngle: this.drawerForm.trainingSampleAngle,
                validType: "2",
                cycleType: "1",
              };
              API_periodic(cyclePara)
                .then((res) => {
                  if (res.code == 200) {
                    this.drawerVisible = false;
                    this.getTableList();
                    this.$message.success(this.$t("周期执行操作成功"));
                  }
                })
                .finally(() => {
                  cycleLoading.close();
                });
              break;
          }
        }
      });
    },
    /** 重置按钮操作 */
    resetFormBtn() {
      this.listQuery = {
        name: null,
        viewType: "",
        overType: "",
        dimension: "",
        priorityList: [],
        pageNum: 1,
        pageSize: 10,
      };
      this.serachBtn();
    },
    /**获取本地时间： */
    insertTempName() {
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth();
      month = month + 1;
      var date = now.getDate();
      var hours = now.getHours();
      var minuts = now.getMinutes();
      var seconds = now.getSeconds();
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      var time =
        year.toString() +
        month.toString() +
        date.toString() +
        hours.toString() +
        minuts.toString() +
        seconds.toString();
      return time;
    },
    /**重置drawer表单内容 */
    resetDrawerForm() {
      this.drawerForm = {
        name: "",
        templateName: "",
        agingTime: "0", //超期上限
        regularStartTime: "", //定期执行开始时间
        cycleType: "1",
        validType: "2", //生效时长
        hurrySetting: "", //快速设置
        quickStartDate: "", //快速设置-开始日期
        quickEndDate: "", //快速设置-结束日期
        // 执行配置
        repeatRate: "3", //重复频率
        repeatRateUnit: "2", //重复频率单位
        //执行时间
        month: "", //循环monthsData获取isSelet为true
        week: "", //同上
        seconds: "",
        h: "",
        m: "",
        s: "",
        trainingSampleGather: "1", //是否采集训练样本
        trainingSampleCount: "", //云台转动次数
        trainingSampleAngle: "", //云台转动间隔
        //常规  生效时段
        startTime: "", //开始日期
        endTime: "", //结束日期
        overTimeLength: 120, //超时时长
        overTimeActionType: "", //超时动作
        executeTimePre: 8, //启动时间 前
        executeTimeNext: 0, //启动时间 后
      };
    },
  },
  beforeDestroy() {
    clearInterval(this.currentTaskTimer);
    this.currentTaskTimer = null;
  },
};
</script>
<style lang="scss" scoped>
.table {
  width: 100%;
  height: 800px;
  // margin-top: 16px;
  border-top: 1px dashed rgba(219, 255, 251, 0.2);
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  .btns {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    div:nth-child(2) {
      margin: 0 16px;
    }
  }
  .table-btns {
    display: flex;
    div {
      display: flex;
      // width: 46px;
      height: 28px;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    div:nth-child(2),
    div:nth-child(4) {
      margin: 0 10px;
    }
    div:nth-child(5) {
      margin-right: 10px;
    }
  }
  .pagenation {
    position: absolute;
    bottom: 30px;
    right: 20px;
  }
}

.drawer-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  div:nth-child(2) {
    margin-left: 16px;
  }
}
.popover-content {
  display: flex;
}
::v-deep {
  .el-input-number__increase,
  .el-input-number__decrease {
    background: transparent;
  }
  .el-icon-arrow-down:before,
  .el-icon-arrow-up:before {
    color: #fff;
  }
}
::v-deep {
  .el-date-editor--time {
    margin-left: 20px;
  }
}
//生效时段
.model,
.config,
.algorith {
  margin-bottom: 10px;
  padding: 15px 24px 10px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  .model-title {
    font-size: 14px;
    font-family: SourceHanSansSC-Bold, SourceHanSansSC;
    font-weight: bold;
    color: #ffffff;
    line-height: 16px;
  }
  label {
    margin-left: 5px;
    color: #fff;
  }
}
.hurry-setting {
  display: flex;
  margin: 10px 0;
  .title {
    font-size: 16px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;
  }
  .contents {
    margin-bottom: 10px;
    font-size: 14px;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffffff;
    line-height: 16px;

    div {
      padding: 5px;
      margin-left: 5px;
      box-sizing: border-box;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
  .current {
    margin-bottom: 10px;
    div {
      padding: 5px;
      margin-left: 5px;
      box-sizing: border-box;
      border-radius: 2px;
      color: #00d1ff;
      background-color: rgba(0, 209, 255, 0.2);
    }
  }
}
//执行配置
.config {
  color: #fff;
  //执行时间
  .month-time {
    display: flex;
    .months,
    .Active {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 8px;
      margin-left: 3px;
    }
    .months {
      background-color: rgba(255, 255, 255, 0.2);
    }
    .Active {
      margin-left: 1px;
      color: #00d1ff;
      background: rgba(0, 209, 255, 0.2);
      border: 1px solid rgba(0, 209, 255, 0.7);
    }
  }
}
.execute-time {
  display: flex;
  .el-form-item__content {
    flex: 1;
  }
}
.draw-content-explain {
  padding: 12px 0 12px 16px;
  font-size: 14px;
  background-color: rgba(255, 173, 48, 0.06);
  div {
    color: #ffad30;
  }
}
//抽屉盒子
.cycle-config {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  color: #ffffff;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(219, 255, 251, 0.14);
  .chang-btn {
    display: flex;
    div {
      text-align: center;
      width: 52px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      line-height: none !important;
    }
    div:nth-child(1) {
      background-color: rgba(0, 209, 255, 0.2);
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #00d1ff;
    }
    div:nth-child(2) {
      background-color: rgba(219, 255, 251, 0.2);
      border-radius: 2px 0px 0px 2px;
      border: 1px solid #dbfffb;
      border-left: 0;
    }
  }
}
.take-effect-time {
  border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
}
::v-deep {
  .el-drawer .el-drawer__body {
    overflow: auto !important;
  }
  .el-form-item__label {
    font-size: 14px !important;
  }
  .self {
    .el-table__body-wrapper {
      width: 100%;
      max-height: 531px;
      overflow: auto;
    }
  }
}
.el-drawer .el-form-item:nth-of-type(1) {
  margin-top: 0;
}
</style>
